<template>
	<!--tabs内容-->
	<up-sticky offset-top="0" bg-color="#fff">
		<up-tabs :current="current" @click='reset' :list="selectList" lineColor="#1dc700" :activeStyle="{
	        color: '#1dc700',
			fontWeight: 'bold',
	    }" :inactiveStyle="{
	        color: '#303133',
	       
	    }"></up-tabs>
	</up-sticky>

	<!--页面内容-->
	<view>
		<view class="list_container" v-if="list.length>0">
			<view class="orderList" v-for="(item,index) in list" :key="index">
				<view class="orderList_title" @click="goPage(item)">
					<view>订单号：{{item.orderNo}}</view>
					<view>{{item.createdAt}}</view>
				</view>
				<view class="orderList_content" @click="goPage(item)">
					<view class="orderList_content_left">
						<up-image width="120rpx" height="120rpx" :src="item.icon??'/static/logo.png'" :lazy-load="true"
							mode="aspectFill"></up-image>
					</view>
					<view class="orderList_content_right">
						<view class="right_title1">
							<view class="flex hcenter right_1">
								<view>{{item.serviceSnapshot.serviceName}}</view>
								<view style="color: #0065d7;margin: 0 20rpx 0 10rpx ;">一对一</view>
								<view style="color: #f86014;">4课起</view>
							</view>
							<view class="flex hcenter right_2">
								<view style="color: #f86014;font-size: 24rpx">￥</view>
								<view style="color: #f86014;font-size: 36rpx">200/{{item.pricetype}}</view>
								<view style="color: #ff6503;margin: 0 10rpx;">6.7折</view>
								<view style="color: #aaa;text-decoration: line-through;">￥{{item.serviceSnapshot.servicePrice}}/{{item.pricetype}}</view>
							</view>
							<view class="right_3">{{item.serviceSnapshot.serviceTime}}</view>
						</view>
						<view class="content_price">
							<view>进行中</view>
						</view>
					</view>
				</view>
				<view class="flex orderList_down">
					<view class="flex orderList_down_1" @click="onrefund(item)">
						<view style="margin-left: 5rpx;">退款</view>
					</view>
					<view class="flex orderList_down_1" @click="ontoushu(item)">
						<image src="/static/f/tousu.png" style="width: 30rpx;height: 30rpx;margin-top: 8rpx;" mode="">
						</image>
						<view style="margin-left: 5rpx;">投诉</view>
					</view>
					<view class="flex orderList_down_2">
						<image src="/static/f/013.gif" style="width: 30rpx;height: 30rpx;margin-top: 8rpx;" mode="">
						</image>
						<view style="margin-left: 5rpx;">删除</view>

					</view>
				</view>
			</view>
		</view>
		<view class="loadmore" v-if="list.length>0">
			<up-loadmore :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText"
				:status="status" />
		</view>
		<view v-if="list.length==0" class="empty_box">
		</view>
		<view class="containerBottom"></view>

	</view>
</template>

<script>
	import {
		getorderListApi
	} from '@/api/order.js'
	import {
		onLoad,
		onUnload,
		onReachBottom,
		onPullDownRefresh,
	} from "@dcloudio/uni-app"
	import {
		reactive,
		toRefs,
		ref,
		watch,
		computed,
		onMounted,
	} from "vue"
	export default {

		setup() {
			const state = reactive({
				selectList: [{
						name: '全部',
						value: null,
					},
					{
						name: '进行中',
						value: 1,

					},
					{
						name: '待评价',
						value: 2,

					},
					{
						name: '退款/售后',
						value: 3,
					},

				],
				current: 0,
				queryForm: {
					pageSize: 10,
					page: 1,
					status: 0,
				},
				skeleton_loading: true,
				sk_tabs_show: true,
				total: 0,
				status: 'loadmore',
				loadingText: '正在加载...',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了',
				list: [],
				pricetype: [{
					value: 0,
					name: '每小时'
				}, {
					value: 1,
					name: '每半天'
				}, {
					value: 2,
					name: '每天'
				}, {
					value: 3,
					name: '每晚'
				}, {
					value: 4,
					name: '每周'
				}, {
					value: 5,
					name: '每月'
				}, {
					value: 6,
					name: '每次'
				}, {
					value: 7,
					name: '每个'
				}, {
					value: 8,
					name: '每套'
				}, {
					value: 9,
					name: '每台'
				}, {
					value: 10,
					name: '每分钟'
				}, {
					value: 11,
					name: 'KG'
				}, {
					value: 12,
					name: '吨'
				}, {
					value: 13,
					name: '斤'
				}, {
					value: 14,
					name: '米'
				}, {
					value: 15,
					name: 'KM'
				}, {
					value: 16,
					name: 'M'
				}, {
					value: 17,
					name: '课时'
				}, ],
			})
			onLoad((option) => {
				getData()
			})

			//下接刷新
			onPullDownRefresh(() => {
				state.queryForm.page = 1
				state.skeleton_loading = true
				state.sk_tabs_show = true
				state.list.length = 0
				getData()
				setTimeout(() => {
					uni.stopPullDownRefresh()
				}, 1000)
			})
			//上拉加载
			onReachBottom(() => {
				let page = state.queryForm.pageSize * state.queryForm.page
				if (state.total > page) {
					state.queryForm.page++
					getData()
				} else {
					state.status = 'nomore'
				}

			})
			//重置
			const reset = (item) => {
				state.queryForm.status = item.value
				state.queryForm.page == 1
				getData()
			}
			//获取列表数据
			const getData = async () => {
				state.status = 'loading'
				if (state.queryForm.page == 1) {
					state.skeleton_loading = true
				}
				const {
					data
				} = await getorderListApi(state.queryForm)
				data.records.forEach(im=>{
					im.serviceSnapshot = JSON.parse(im.serviceSnapshot);
					im.pricetype = state.pricetype.find(w=>w.value==im.serviceSnapshot.priceType).name;
				});
				console.log(data);
				uni.stopPullDownRefresh()
				state.total = data.total
				if (state.total <= state.queryForm.pageSize) {
					state.status = 'nomore'
					state.list = data.records
					state.skeleton_loading = false
					state.sk_tabs_show = false
					return false
				}
				if (state.total > state.queryForm.pageSize) {
					setTimeout(() => {
						state.list = state.list.concat(data.records)
						state.skeleton_loading = false
						state.sk_tabs_show = false
						state.status = 'loadmore'
					}, 1000)
				}

			}

			const goPage = (item) => {
				uni.navigateTo({
					url: 'detail?orderNo=' + item.orderNo
				})
			}
			const ontoushu = (item) => {
				uni.navigateTo({
					url: '/subpages/my/toushu?orderNo=' + item.orderNo
				})
			}
			const onrefund = (item) => {
				uni.navigateTo({
					url: 'refund?orderNo=' + item.orderNo
				})
			}
			return {
				...toRefs(state),
				goPage,
				reset,
				ontoushu,
				onrefund,
			}
		}

	}
</script>


<style>
	page {
		background-color: #EFEFEF;
	}
</style>
<style scoped lang="scss">
	.list_container {
		margin-top: 1rpx;
	}

	.orderList {
		width: 100%;
		background-color: white;
		margin-top: 20rpx;

		.orderList_title {
			width: 100%;
			// height: 5vh;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			padding: 20rpx 0;

			view:nth-child(1) {
				margin-left: 3%;
			}

			view:nth-child(2) {
				margin-right: 3%;
				color: #999;
				font-size: 26rpx;
			}
		}

		.orderList_content {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10rpx 20rpx 20rpx 20rpx;
			border-bottom: 1rpx solid #eaeaea;

			.orderList_content_left {
				width: 140rpx;
				height: 100%;
				display: flex;
				align-items: center;

			}

			.orderList_content_right {
				flex: 1;
				height: 100%;
				display: flex;
				// align-items: center;
				justify-content: center;

				.right_title1 {
					flex: 1;
					height: 100%;
					font-size: 28rpx;
					.right_1{
						
					}
					.right_2{
						margin: 10rpx 0;
						align-items: flex-end;
						font-size: 26rpx;
					}
					.right_3{
						color: #aaa;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis; 
						max-width: 440rpx;
					}
				}

				.content_price {
					// width: 180rpx;
					// height: 100%;
					text-align: right;
					// align-items: center;
					// justify-content: center;

					view:nth-child(1) {
						color: #00be4a;
						font-size: 30rpx;
					}
				}
			}
		}

		.orderList_down {
			justify-content: flex-end;
			padding: 30rpx 10rpx;
			font-size: 30rpx;

			.orderList_down_1 {
				margin-right: 60rpx;
			}

			.orderList_down_2 {
				margin-right: 10rpx;

			}
		}
	}
</style>